<!DOCTYPE html>
<html lang="en">
<head>

    {include file="common/meta" /}

    <!-- Title -->
    <title><?=config('system.web_name')?></title>

    <style>
        body {
            text-align: center;
            background-color: #F1F3F6;
            overflow: hidden;
        }

        .transfer {
            width: 300px;
            margin: 10% auto 0px;
        }

        .transfer .title {
            font-size: 18px;
            color: #000000;
            font-weight: 700;
        }

        .transfer .card {
            margin-bottom: 0px;
            border-radius: 6px 6px 0px 0px;
        }

        .transfer .progress-bar {
            width: 100%;
            transition: linear width 1s;
            -moz-transition: linear width 1s; /* Firefox 4 */
            -webkit-transition: linear width 1s; /* Safari and Chrome */
            -o-transition: linear width 1s; /* Opera */
        }

        .ani {
            width: 140px;
            height: 140px;
            padding: 26px;
            background-color: #fff;
            margin-left: calc(50% - 70px);
        }

        .ani.code_404 {
            width: 140px;
            height: 140px;
            padding: 0px;
            background-color: #fff;
            margin-left: calc(50% - 100px);
        }

        .code_404 > img {
            width: 200px;
            animation: animateErrorIcon .5s;
        }

        .ani-box {
            border-radius: 50%;
            border: 4px solid #F27474;
            box-sizing: content-box;
            height: 80px;
            padding: 0;
            position: relative;
            background-color: #fff;
            width: 80px;
            animation: animateErrorIcon .5s;
        }

        .ani-box:after, .ani-box:before {
            background: #fff;
            content: '';
            height: 120px;
            position: absolute;
            transform: rotate(45deg);
            width: 60px;
        }

        .ani-box:before {
            border-radius: 40px 0 0 40px;
            width: 26px;
            height: 80px;
            top: -17px;
            left: 5px;
            transform-origin: 60px 60px;
            transform: rotate(-45deg);
        }

        .ani-box:after {
            border-radius: 0 120px 120px 0;
            left: 30px;
            top: -11px;
            transform-origin: 0 60px;
            transform: rotate(-45deg);
            animation: rotatePlaceholder 4.25s ease-in;
        }

        .ani-ani-box {
            display: block;
            position: relative;
            z-index: 2;
        }

        .ani-placeholder {
            border-radius: 50%;
            border: 4px solid rgba(200, 0, 0, 0.2);
            box-sizing: content-box;
            height: 80px;
            left: -4px;
            position: absolute;
            top: -4px;
            width: 80px;
            z-index: 2;
        }

        .ani-fix {
            background-color: #fff;
            height: 90px;
            left: 28px;
            position: absolute;
            top: 8px;
            transform: rotate(-45deg);
            width: 5px;
            z-index: 1;
        }

        @keyframes rotatePlaceholder {
            0%, 5% {
                transform: rotate(-45deg);
            }
            100%, 12% {
                transform: rotate(-405deg);
            }
        }

        @keyframes animateErrorIcon {
            0% {
                transform: rotateX(100deg);
                opacity: 0;
            }
            100% {
                transform: rotateX(0deg);
                opacity: 1;
            }
        }

        /*error*/
        .ani-error-left, .ani-error-right {
            border-radius: 2px;
            display: block;
            height: 5px;
            position: absolute;
            z-index: 2;
            background-color: #f22f32;
            top: 37px;
            width: 47px;
        }

        .ani-error-right {
            right: 16px;
            transform: rotate(-45deg);
            animation: animateErrorRight .75s;
        }

        .ani-error-left {
            left: 17px;
            transform: rotate(45deg);
            animation: animateErrorLeft .75s;
        }

        @keyframes animateErrorLeft {
            0%, 65% {
                left: 82px;
                top: 95px;
                width: 0;
            }
            84% {
                left: 14px;
                top: 33px;
                width: 47px;
            }
            100% {
                left: 17px;
                top: 37px;
                width: 47px;
            }
        }

        @keyframes animateErrorRight {
            0%, 65% {
                right: 82px;
                top: 95px;
                width: 0;
            }
            84% {
                right: 14px;
                top: 33px;
                width: 47px;
            }
            100% {
                right: 16px;
                top: 37px;
                width: 47px;
            }
        }

        /*success*/
        .ani-success-left, .ani-success-right {
            border-radius: 2px;
            display: block;
            height: 5px;
            position: absolute;
            z-index: 2;
            background-color: #f25f65;
        }

        .ani-success-left {
            transform: rotate(45deg);
            left: 10px;
            top: 47px;
            width: 27px;
            animation: animateSuccessLeft .75s;
        }

        .ani-success-right {
            transform: rotate(-45deg);
            right: 7px;
            top: 38px;
            width: 50px;
            animation: animateSuccessRight .75s;
        }

        @keyframes animateSuccessLeft {
            0%, 65% {
                left: 82px;
                top: 95px;
                width: 0;
            }
            84% {
                left: 10px;
                top: 48px;
                width: 27px;
            }
            100% {
                left: 10px;
                top: 48px;
                width: 27px;
            }
        }

        @keyframes animateSuccessRight {
            0%, 65% {
                right: 82px;
                top: 95px;
                width: 0;
            }
            84% {
                right: 6px;
                top: 38px;
                width: 50px;
            }
            100% {
                right: 6px;
                top: 38px;
                width: 50px;
            }
        }
    </style>
</head>
<body>

<div class="transfer">
    <div class="card">
        <div class="card-body">
            {if $code == 404}
            <div class="ani code_404">
                <img src="/static/web/images/404.png">
            </div>
            {else}
            <div class="ani">
                <div class="ani-box">
                    <div class="ani-ani-box">
                        <?php if ($code == 0){ ?>
                        <div class="ani-success-left"></div>
                        <div class="ani-success-right"></div>
                        <?php }else{ ?>
                        <div class="ani-error-left"></div>
                        <div class="ani-error-right"></div>
                        <?php } ?>
                    </div>
                    <div class="ani-placeholder"></div>
                    <div class="ani-fix"></div>
                </div>
            </div>
            {/if}
            <p class="title"><?php echo(strip_tags($msg));?></p>
            <button onclick="jump(true)" class="btn btn-primary">确认</button>
        </div>
    </div>

    <div class="progress" style="height: 5px;">
        <div class="progress-bar bg-dark" id="leftBar" role="progressbar" aria-valuemin="0"
             aria-valuemax="<?php echo($wait);?>"></div>
    </div>
</div>

{include file="common/script" /}

<script type="text/javascript">
    var bar = document.querySelector('#leftBar'),
        wait = "<?php echo($wait);?>",
        href = "<?php echo($url);?>",
        interval = null

    var total = wait, width = wait / total

    function jump(d = false) {
        width = (--wait) / total
        bar.style.width = width * 100 + '%'

        if (true === d || wait < 0) {
            if (href) {
                location.href = href;
            } else {
                window.history.go(-1);
            }
            if (interval) clearInterval(interval)
        }
    }

    (function () {
        if (wait > 0) {
            interval = setInterval(jump, 1000);
        }
    })();
</script>

</body>
</html>
